<template>
    <div class="box-padding" style="overflow:hidden">
        <!-- <div class="role-title">方案制定</div> -->
        <Row :gutter="16">
            <Col span="6">
                <Button type="primary" style="margin-right:20px;" @click="addCsModal = !addCsModal,title = '管控措施新增',type='add'">新增方案</Button>
                <Button type="primary" @click="allCheck">不涉及</Button>
            </Col>
        </Row>
        <Row :gutter="60" style="margin-top:20px;">
            <Col span="12">
                <Row>
                    <Col span="12" style="font-size:13px;">
                        *请先勾选相应的管控措施，添加管控人
                    </Col>
                    <Col span="12" style="text-align:right;font-size:13px;color:#0099FF;">
                        <span @click="lookPast = true,processControlHistory()" style="cursor: pointer;">点击查看过往每月管控情况</span>
                    </Col>
                    <Col span="24" style="margin-top:10px;">
                        <Input v-model="palnObj.riskControlDetailOne" type="textarea" :rows="3" placeholder="请输入" />
                    </Col>
                </Row>
            </Col>
            <Col span="12">
                <Row>
                    <Col span="24" style="font-size:13px;">
                        *工程公司当月管控要求
                    </Col>
                    <Col span="24" style="margin-top:10px;">
                        <Input v-model="palnObj.riskControlRequirementOne" type="textarea" :rows="3" placeholder="请输入" />
                    </Col>
                </Row>
            </Col>
        </Row>
        <div style="margin-top:20px;">
            <Row class="paln-table-title">
                <Col span="6" style="color:#EF3E43;">
                    *请先勾选相应的管控措施，添加管控人
                </Col>
                <Col span="6">
                    <span class="col-title">项目部管控责任人</span>
                    <Button @click="selectPersonnel(1),$refs.personData.setData()" style="color:#2d8cf0;">选择人员</Button>
                </Col>
                <Col span="6">
                    <span class="col-title">项目部分管领导</span>
                    <Button @click="selectPersonnel(2)" style="color:#2d8cf0;">选择人员</Button>
                </Col>
                <Col span="6">
                    <span class="col-title">项目部主管领导</span>
                    <Button @click="selectPersonnel(3)" style="color:#2d8cf0;">选择人员</Button>
                </Col>
            </Row>
            <Row>
                <Col span="24" style="font-size:13px;">
                    <Table border :columns="columns1" :data="palnObj.measuresDtoList" @on-selection-change="selectionChange">
                        <template slot-scope="{ row, index }" slot="measuresAction">
                            <span>{{row.measuresTypeName ? row.measuresTypeName : row.measureTypeName}}</span>
                        </template>
                        <template slot-scope="{ row, index }" slot="departmentId">
                            <span :class="[(row.projectManagementDepartment=='' || row.projectManagementDepartment==undefined) ? 'huise' : '']">{{row.projectManagementDepartmentName ? row.projectManagementDepartmentName : '请选择'}}</span>
                        </template>
                        <template slot-scope="{ row, index }" slot="projectManagementLeader">
                            <span :class="[(row.projectManagementLeader=='' || row.projectManagementLeader==undefined) ? 'huise' : '']">{{row.projectManagementLeaderName ? row.projectManagementLeaderName : '请选择'}}</span>
                        </template>
                        <template slot-scope="{ row, index }" slot="leaderInChargeOfProjectDepartment">
                            <span :class="[(row.leaderInChargeOfProjectDepartment=='' || row.leaderInChargeOfProjectDepartment==undefined) ? 'huise' : '']">{{row.leaderInChargeOfProjectDepartmentName ? row.leaderInChargeOfProjectDepartmentName : '请选择'}}</span>
                        </template>
                        <template slot-scope="{ row, index }" slot="action">
                            <a class="action-button" @click="initRemoveRow(index)">不涉及</a>
                        </template>
                    </Table>
                </Col>
            </Row>
        </div>
        <Row :gutter="30" style="margin-top:40px;">
            <Col span="12" style="text-align:right;">
                <Button type="primary" @click.stop="save">保存</Button>
            </Col>
            <Col span="12">
                <Button @click="$emit('isPlanMethods',false),palnObj.measuresDtoList = measuresDtoList">取消</Button>
            </Col>
        </Row>
        <Modal v-model="addCsModal" :title="title" :footer-hide="true" width="50%">
            <detail v-if="addCsModal" :type="type" @detailModal="detailModal" @detailModalObj="detailModalObj"></detail>
        </Modal>
        <Modal v-model="lookPast" title="查看过往每月安全管控情况" :footer-hide="true" width="40%">
            <div style="background-color: #f5f5f5;padding:5px 10px; margin-bottom:5px;" v-for="(item,index) in personObj" :key="index">
                <div>
                    <span class="span-month">{{item.month}}月该风险管控情况:<Button v-show="item.riskControlDetailOne" @click="palnObj.riskControlDetailOne = item.riskControlDetailOne,lookPast=!lookPast" style="color:#2d8cf0;border-color:#2d8cf0;float:right;">引用</Button></span>
                    <div class="month-con">
                        {{item.riskControlDetailOne}}
                    </div>
                </div>
                <div class="span-month">
                    填写人：{{item.riskControlUserName}}({{item.riskControlUserPostName}})
                </div>
                <div class="span-month">
                    填写时间：{{$time(new Date(item.riskControlOperateTime),'yyyy-MM-dd hh:mm:ss')}}
                </div>
            </div>
            <div style="text-align:center;color:#17233d;" v-if="personObj.length == 0">
                暂无数据
            </div>
        </Modal>
        <Modal v-model="personModel" title="人员选择" :footer-hide="true" width="80%">
            <checkPersonModal @func="getMsg" ref="personData" :detailShow="true"></checkPersonModal>
        </Modal>
    </div>
</template>
<script>
import checkPersonModal from '../../../views/MeasurePlan/checkPersonModal'
import detail from './plan-detail'
export default {
    props:['dynamicRiskOrderId','riskOperationId','planRow','source','projectIds','pointId','editType'],
    components:{
        detail,
        checkPersonModal
    },
    data(){
        return{
            personObj:[],
            formItem:{},
            addCsModal:false,
            lookPast:false,
            personModel:false,
            title:'',
            type:'',
            currentPage:1,
            columns1: [
                {
                    type: 'selection',
                    align: 'center',
                    width: 60,
                },
                {
                    title: '序号',
                    align: 'center',
                    width: 60,
                    render: (h, params) => {
                        return h('span', params.index + (this.currentPage- 1) * this.currentPage + 1);
                    }
                },
                {
                    title: '管控措施',
                    key: 'measures',
                    align: 'center'
                },
                {
                    title: '措施类型',
                    key: 'measuresTypeName',
                    slot: 'measuresAction',
                    align: 'center'
                },
                {
                    title: '频次',
                    key: 'frequencyName',
                    align: 'center'
                },
                {
                    title: '项目部管控责任人',
                    key: 'projectManagementDepartmentName',
                    slot: 'departmentId',
                    align: 'center'
                },
                {
                    title: '项目部分管领导',
                    key: 'projectManagementLeaderName',
                    slot: 'projectManagementLeader',
                    align: 'center'
                },
                {
                    title: '项目部主管领导',
                    key: 'leaderInChargeOfProjectDepartmentName',
                    slot: 'leaderInChargeOfProjectDepartment',
                    align: 'center'
                },
                {
                    title: '操作',
                    slot: 'action',
                    align: 'center',
                    width: 80,
                },
            ],
            palnObj:{
                riskOrderId:'',
                constructionPointId:'',
                riskOperationId:'',
                riskOperationName:'',
                riskCategoryIds:'',
                riskCategoryNames:'',
                riskLevel:'',
                riskLevelName:'',
                classificationMethodId:'',
                classificationMethodName:'',
                riskDescription:'',
                riskControlRequirementTwo:'',
                riskControlDetailOne:'',
                riskControlRequirementOne:'',
                measuresDtoList: [],
            },
            selectTable:[],
            personType:'',
            dataSave:true,
            measuresDtoList:[]
        }
    },
    methods: {
        measuresNewId(){
            setTimeout(()=>{
                this.palnObj.riskControlDetailOne = ''
                this.palnObj.riskControlRequirementOne = ''
                this.palnObj.measuresDtoList = []
                if(this.source == 'last'){
                    this.$api.MonthlyDynamics.lastMeasuresDynamic(this.projectIds,this.pointId,this.dynamicRiskOrderId).then(resp=>{
                        if(resp.code == 200){
                            resp.data.forEach((e,index)=>{
                                e.numId = index + 1
                                e.measuresId = e.id
                                e.measures = e.name
                            })
                            this.palnObj.measuresDtoList = resp.data
                        }
                    })
                }else{
                    this.$api.MonthlyDynamics.nextMeasuresDynamic(this.projectIds,this.pointId,this.dynamicRiskOrderId).then(resp=>{
                        if(resp.code == 200){
                            resp.data.forEach((e,index)=>{
                                e.numId = index + 1
                                e.measuresId = e.id
                                e.measures = e.name
                            })
                            this.palnObj.measuresDtoList = resp.data
                        }
                    })
                }
            },1000)
        },
        rowSetObj(){
            let self = this
            setTimeout(()=>{
                self.measuresDtoList = []
                self.planRow.measuresDtoList.forEach((e,index)=>{
                    e.numId = index + 1
                    self.measuresDtoList.push(JSON.parse(JSON.stringify(e)))
                })
                self.palnObj = self.planRow
            },1000)
        },
        save(){
            if(this.palnObj.riskControlDetailOne == ''){
                this.$Message.warning('安全管控情况不能为空')
                return
            }
            if(this.palnObj.riskControlRequirementOne == ''){
                this.$Message.warning('当月安全管控情况不能为空')
                return
            }
            if(this.palnObj.measuresDtoList.length <= 0){
                this.$Message.warning('请新增一个管控措施')
                return
            }else{
                this.dataSave = true
                // for(let i = 0; i < this.palnObj.measuresDtoList.length; i++){
                //     if(!this.palnObj.measuresDtoList[i].projectManagementDepartment ||
                //        !this.palnObj.measuresDtoList[i].projectManagementLeader ||
                //        !this.palnObj.measuresDtoList[i].projectManagementLeaderName){
                //            this.$Message.warning('数据不全，请补充数据')
                //            this.dataSave = false
                //            break
                //     }else{
                //         this.dataSave = true
                //     }
                // }
            }
            if(this.dataSave){
                this.$emit('isPlanObj',JSON.stringify(this.palnObj))
                
                this.$emit('isPlanMethods',false)
            }
        },
        // 点击查看过往每月管控情况
        processControlHistory(){
            this.$api.MonthlyDynamics.processControlHistory(this.dynamicRiskOrderId).then(resp=>{
                if(resp.code == 200){
                    this.personObj = resp.data
                }
            })
        },
        initRemoveRow(index) {
            this.$Modal.confirm({
                title: '删除提示',
                content: '<p>确认删除当前项吗？</p>',
                okText: '确定',
                cancelText: '取消',
                onOk: () => {
                    this.palnObj.measuresDtoList.splice(index, 1)
                }
            })
        },
        // 关闭新增方案的框
        detailModal(res){
            this.addCsModal = res
        },
        // 接收新增方案的值
        detailModalObj(res){
            this.selectTable = []
            res.measuresTypeName = res.measureType == 1 ? '管理' : '技术'
            res.numId = this.palnObj.measuresDtoList.length+1
            res.measuresId = res.id ? res.id : ''
            res.measures = res.name ? res.name : res.measures
            this.palnObj.measuresDtoList.push(res)
        },
        // table选择操作
        selectionChange(val){
            this.selectTable = val
        },
        // 人员选择
        selectPersonnel(type){
            this.personType = type
            if(this.selectTable.length > 0){
                this.personModel = !this.personModel
            }else{
                this.$Message.warning('请先选择需要设置的管控措施')
            }
        },
        // 全选
        allCheck(){
            let self = this
            if(this.selectTable.length == this.palnObj.measuresDtoList.length){
                this.$Modal.confirm({
                    title: '删除提示',
                    content: '<p>确认删除当前项吗？</p>',
                    okText: '确定',
                    cancelText: '取消',
                    onOk: () => {
                        this.palnObj.measuresDtoList = []
                    }
                })
            }
            if(this.selectTable.length > 0 &&  this.selectTable.length < this.palnObj.measuresDtoList.length){
                this.$Modal.confirm({
                    title: '删除提示',
                    content: '<p>确认删除当前项吗？</p>',
                    okText: '确定',
                    cancelText: '取消',
                    onOk: () => {
                        self.selectTable.forEach(e=>{
                            self.palnObj.measuresDtoList.forEach((a,index)=>{
                                if(e.numId == a.numId){
                                    self.palnObj.measuresDtoList.splice(index, 1)
                                }
                            })
                        })
                        self.selectTable = []
                    }
                })
            }
            if(this.selectTable.length == 0){
                this.$Message.warning('您还未选择措施')
            }
        },
        getMsg(res){
            this.selectTable.forEach(a=>{
                this.palnObj.measuresDtoList.forEach(e=>{
                    if(a.numId == e.numId){
                        if(this.personType == 1){
                            this.$set(e,'projectManagementDepartment',res.personUserOrgId)
                            this.$set(e,'projectManagementDepartmentName',res.name+`(${res.postName})`)
                        }else if(this.personType == 2){
                            this.$set(e,'projectManagementLeader',res.personUserOrgId)
                            this.$set(e,'projectManagementLeaderName',res.name+`(${res.postName})`)
                        }else{
                            this.$set(e,'leaderInChargeOfProjectDepartment',res.personUserOrgId)
                            this.$set(e,'leaderInChargeOfProjectDepartmentName',res.name+`(${res.postName})`)
                        }
                    }
                })
            })

            this.selectTable = []
            this.personModel = false
        }
    }
}
</script>
<style scoped>
.paln-table-title{
    border:1px solid #dcdee2;
    border-bottom:none;
    min-height:50px;
    line-height: 50px;
    font-size: 13px;
    padding: 0 10px;
}
.col-title{
    height:50px;
    line-height: 50px;
    display: inline-block;
    float: left;
    padding-right: 10px;
}
.action-button{
    padding: 0 10px 0 0;
}
.span-month{
    font-size: 13px;
    font-weight: bold;
    display: block;
    color: #17233d;
    height: 30px;
    line-height: 30px;
}
.month-con{
    padding-left: 40px;
    font-size: 13px;
}
.huise{
    color: #999;
}
</style>
